<template>
  <div class="keshangpingce">
    <div class="kspctopposidiv">
      <div style="font-size: 0.8rem">企业名称:&nbsp;&nbsp;</div>
      <div style="display: flex; align-items: center" class="kspcinputclass" id="searchinput">
        <div style="position: relative">
          <div style="display: flex; align-items: center" class="kspcinputshur">
            <el-input id="inputval" placeholder="请输入企业名称" clearable v-model="qymcnamekspc"
              @keyup.enter.native="supplierList()">
            </el-input>
          </div>

        </div>
      </div>
      <div style="font-size: 0.8rem; margin-left: 1rem;">时间:&nbsp;&nbsp;</div>
      <div class="style1" style="margin-right: 30px">
        <dataPicker :disabled="isDisabled" v-model="year" type="year" value-format="yyyy" placeholder="请选择"
          :editable="false" prefix-icon="1" />
      </div>

      <div style="font-size: 0.8rem; margin-left: 1rem;">企业排行分类:&nbsp;&nbsp;</div>
      <div class="com_type">
        <el-select v-model="com_type_val" size="mini" clearable placeholder="请选择">
          <el-option v-for="item in projectList" :key="item.object" :label="item.objectname" :value="item.object">
          </el-option>
        </el-select>
      </div>

      <div style="
        font-size: 0.8rem; 
        margin-right: 1rem;
        cursor: pointer;
        background: #182c56;
        height: 1.6rem;
        color: #fff;
        line-height: 1.6rem;
        padding: 0 1rem;
        border-radius: 1rem;" @click="resetEvent">重置</div>
      <img src="../assets/searchpage.png" style="height: 1.6rem; cursor: pointer" @click="supplierList()" />

    </div>

    <!-- 客商评测弹框 -->
    <div style="position: relative; height: 100%">
      <div class="mainContent">
        <div class="maindivcontent" style="height: 100%">
          <div class="mevaluatimiddle1" v-if="ksLoading" style="
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
            ">
            <dv-loading>Loading...</dv-loading>
          </div>
          <div class="mevaluatimiddle" v-else>

            <div class="tb">
              <div class="tb_head">
                <div class="td td_1">序号</div>
                <div class="td td_2">公司名称</div>
                <div class="td td_2_1">供应商分类</div>
                <div class="td td_3">中标总金额（万元）</div>
                <div class="td td_4">统一社会信用代码</div>
                <div class="td td_5">企业性质</div>
                <div class="td td_6">法人</div>
                <div class="td td_7">操作</div>
              </div>
              <div class="tb_body" v-if="tableData.length > 0">
                <div class="tr" v-for="(item, i) in tableData" :key="i">
                  <div class="td td_1">{{ i + 1 }}</div>
                  <div class="td td_2" :title="item.supplierName">{{ item.supplierName }}</div>
                  <div class="td td_2_1" :title="item.supplierType">{{ item.supplierType }}</div>
                  <div class="td td_3">{{ (+item.totalPrice / 10000).toFixed(2) }}</div>
                  <div class="td td_4">{{ item.orgnizationCode }}</div>
                  <div class="td td_5" >{{ enumeration[item.property] }}</div>
                  <div class="td td_6">{{ item.representative }}</div>
                  <div class="td td_7" @click="kspclistclickitem1(item.supplierId, item)">查看</div>
                </div>
              </div>
              <div class="tb_body no-data" v-else>暂无数据</div>
              <el-pagination small background align="center" @current-change="currentChangeTb"
                :current-page="currentPageTb" :page-size="20" layout="total,prev,pager,next,jumper" :total="totalTb">
              </el-pagination>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div v-if="kspcmiddlevisiable" style="width: 100%; height: 100%" id="showvisible">
      <Kspcxiaodialog :modalVisible="kspcmiddlevisiable">
        <template>
          <div class="popup">
            <div class="tag-conter">
              <div class="text" v-if="detailinfo.categoryList != null">
                {{ detailinfo.categoryList[0].categoryname.slice(0, 4) || "-" }}
              </div>
              <div class="text2" v-if="detailinfo.isinner != null">
                {{ detailinfo.isinner == 1 ? "外" : "内" }}
              </div>
            </div>
            <div class="theme">
              <div class="theme-box">
                <div class="left">
                  <div style="height: 2rem">
                    <p v-if="detailinfo.enterprisename" class="textchuli" style="width: 93%"
                      :title="detailinfo.enterprisename">
                      {{ detailinfo.enterprisename }}
                    </p>
                  </div>
                  <div class="info-qcds">
                    <span class="sp1">QCDS</span>
                    <span class="sp2">评分：</span>
                    <span class="sp1">{{ qcdsVal ? qcdsVal : '无' }}</span>
                    <span class="sp1" v-if="qcdsVal > 89" style="margin-left: 10px;">优</span>
                    <span class="sp1" v-else-if="qcdsVal > 79" style="margin-left: 10px;">良</span>
                    <span class="sp1" v-else-if="qcdsVal > 59" style="margin-left: 10px;">合格</span>
                  </div>
                  <div class="left-con">
                    <div class="ll">

                      <div class="info-xy">
                        <div class="lable">统一社会信用代码</div>
                        <div class="value">
                          {{ detailinfo.orgnizationcode || "-" }}
                        </div>
                        <div v-if="detailinfo.orgnizationcode" class="icon" @click="gocopy"
                          v-copy="detailinfo.orgnizationcode">
                          <img src="@/assets/lwfb-fz.png" alt="" />
                        </div>
                      </div>
                      <div class="info-sf">
                        <div class="name" v-if="detailinfo.contactperson">
                          {{ detailinfo.contactperson }}
                        </div>
                        <div class="phone" v-if="detailinfo.phone || detailinfo.mobile">
                          {{ detailinfo.phone || detailinfo.mobile }}
                        </div>
                        <!-- <div class="risk" style="cursor: pointer" @click="waibufenxian">
                          <i
                            class="el-icon-warning"
                            style="
                              margin-right: 0.2rem;
                              font-size: 0.9rem;
                              color: #f15a24;
                            "
                          ></i
                          >外部风险
                        </div> -->
                        <div class="name-icon">
                          <img src="@/assets/lwfb-tx.png" alt="" style="" />
                        </div>
                        <div class="name-phone">
                          <img src="@/assets/lwfb-dh.png" alt="" />
                        </div>
                      </div>

                    </div>

                    <div class="rr">

                      <div class="info-from">
                        <div class="li">
                          <div class="lable">企业性质</div>
                          <div class="value">{{ detailinfo.kspcqyxz || "-" }}</div>
                        </div>
                        <div class="li">
                          <div class="lable">企业类型</div>
                          <div class="value">
                            {{
                              detailinfo.typename == 1
                                ? "生产商"
                                : detailinfo.typename == 2
                                  ? "经销商/代理商"
                                  : "其他" || "-"
                            }}
                          </div>
                        </div>
                        <div class="li">
                          <div class="lable">法定代表人</div>
                          <div class="value">
                            {{ detailinfo.representative || "-" }}
                          </div>
                        </div>
                        <div class="li">
                          <div class="lable">注册资金</div>
                          <div class="value">
                            {{
                              detailinfo.registercapital == 0 ||
                                detailinfo.registercapital == null
                                ? "-"
                                : detailinfo.registercapital + "万元" || "-"
                            }}
                          </div>
                        </div>
                      </div>

                    </div>

                  </div>

                  <div class="info-fw" style="margin-bottom: 12px;">
                    <div class="title">经营范围</div>
                    <div style="
                        height: 100%;
                        overflow: hidden;
                        max-height: 4rem;
                        overflow-y: scroll;
                      " class="scrollbar">
                      <span style="font-size: 0.8rem" :title="detailinfo.primarybusiness">{{ detailinfo.primarybusiness
                        || "-" }}</span>
                    </div>
                    <!-- <div
                      style="height: 100%; overflow-y: scroll; font-size: 0.8rem"
                      :title="detailinfo.primarybusiness"
                    >
                    <p style="font: 0.8rem;">
                      {{ detailinfo.primarybusiness || "-" }}
                    </p> 
                    </div> -->
                  </div>

                </div>

                <div class="theme-right" @click="goto">
                  <Echart ref="jgzzfb" id="jgzzfb" class="echart" :options="opt" height="100%" width="100%"></Echart>
                </div>

              </div>
              <div class="theme-con" v-if="false">
                <div class="theme-left">
                  <div style="height: 2rem">
                    <p v-if="detailinfo.enterprisename" class="textchuli" style="width: 93%"
                      :title="detailinfo.enterprisename">
                      {{ detailinfo.enterprisename }}
                    </p>
                  </div>

                  <div class="info-qcds">
                    <span class="sp1">QCDS</span>
                    <span class="sp2">评分：</span>
                    <span class="sp1">400</span>
                  </div>

                  <div class="info-xy">
                    <div class="lable">统一社会信用代码</div>
                    <div class="value">
                      {{ detailinfo.orgnizationcode || "-" }}
                    </div>
                    <div v-if="detailinfo.orgnizationcode" class="icon" @click="gocopy"
                      v-copy="detailinfo.orgnizationcode">
                      <img src="@/assets/lwfb-fz.png" alt="" />
                    </div>
                  </div>
                  <div class="info-sf">
                    <div class="name" v-if="detailinfo.contactperson">
                      {{ detailinfo.contactperson }}
                    </div>
                    <div class="phone" v-if="detailinfo.phone || detailinfo.mobile">
                      {{ detailinfo.phone || detailinfo.mobile }}
                    </div>
                    <div class="risk" style="cursor: pointer" @click="waibufenxian">
                      <i class="el-icon-warning" style="
                          margin-right: 0.2rem;
                          font-size: 0.9rem;
                          color: #f15a24;
                        "></i>外部风险
                    </div>
                    <div class="name-icon">
                      <img src="@/assets/lwfb-tx.png" alt="" style="" />
                    </div>
                    <div class="name-phone">
                      <img src="@/assets/lwfb-dh.png" alt="" />
                    </div>
                  </div>
                  <div class="info-fw" style="">
                    <div class="title">经营范围</div>
                    <div style="
                        height: 100%;
                        overflow: hidden;
                        max-height: 4rem;
                        overflow-y: scroll;
                      " class="scrollbar">
                      <span style="font-size: 0.8rem" :title="detailinfo.primarybusiness">{{ detailinfo.primarybusiness
                        || "-" }}</span>
                    </div>
                    <!-- <div
                      style="height: 100%; overflow-y: scroll; font-size: 0.8rem"
                      :title="detailinfo.primarybusiness"
                    >
                    <p style="font: 0.8rem;">
                      {{ detailinfo.primarybusiness || "-" }}
                    </p> 
                    </div> -->
                  </div>
                </div>
                <div class="theme-center">
                  <div class="info-from">
                    <div class="li">
                      <div class="lable">企业性质</div>
                      <div class="value">{{ detailinfo.kspcqyxz || "-" }}</div>
                    </div>
                    <div class="li">
                      <div class="lable">企业类型</div>
                      <div class="value">
                        {{
                          detailinfo.typename == 1
                            ? "生产商"
                            : detailinfo.typename == 2
                              ? "经销商/代理商"
                              : "其他" || "-"
                        }}
                      </div>
                    </div>
                    <div class="li">
                      <div class="lable">法定代表人</div>
                      <div class="value">
                        {{ detailinfo.representative || "-" }}
                      </div>
                    </div>
                    <div class="li">
                      <div class="lable">注册资金</div>
                      <div class="value">
                        {{
                          detailinfo.registercapital == 0 ||
                            detailinfo.registercapital == null
                            ? "-"
                            : detailinfo.registercapital + "万元" || "-"
                        }}
                      </div>
                    </div>

                    <div class="li" v-if="
                      detailinfo.extdatajson != null &&
                      detailinfo.extdatajson.bank != undefined
                    ">
                      <div class="lable">开户银行</div>
                      <div class="value" :title="detailinfo.extdatajson.bank">
                        {{ detailinfo.extdatajson.bank || "-" }}
                      </div>
                      <div class="icon" @click="gocopy" v-copy="detailinfo.extdatajson.bank">
                        <img src="@/assets/lwfb-fz.png" alt="" />
                      </div>
                    </div>
                    <div class="li" v-else>
                      <div class="lable">开户银行</div>
                      <div class="value">-</div>
                      <div class="icon"></div>
                    </div>

                    <div class="li" v-if="
                      detailinfo.extdatajson != null &&
                      detailinfo.extdatajson.accountname != undefined
                    ">
                      <div class="lable">账户名称</div>
                      <div class="value" :title="detailinfo.extdatajson.accountname">
                        {{ detailinfo.extdatajson.accountname || "-" }}
                      </div>
                      <div class="icon" @click="gocopy" v-copy="detailinfo.extdatajson.accountname">
                        <img src="@/assets/lwfb-fz.png" alt="" />
                      </div>
                    </div>
                    <div class="li" v-else>
                      <div class="lable">账户名称</div>
                      <div class="value">-</div>
                      <div class="icon"></div>
                    </div>

                    <div class="li" v-if="
                      detailinfo.extdatajson != null &&
                      detailinfo.extdatajson.banknumber != undefined
                    ">
                      <div class="lable">银行账号</div>
                      <div class="value" :title="detailinfo.extdatajson.banknumber">
                        {{ detailinfo.extdatajson.banknumber || "-" }}
                      </div>
                      <div class="icon" @click="gocopy" v-copy="detailinfo.extdatajson.banknumber">
                        <img src="@/assets/lwfb-fz.png" alt="" />
                      </div>
                    </div>
                    <div class="li" v-else>
                      <div class="lable">银行账号</div>
                      <div class="value">-</div>
                      <div class="icon"></div>
                    </div>

                    <div class="li" v-if="
                      detailinfo.extdatajson != null &&
                      detailinfo.extdatajson.unionpayno != undefined
                    ">
                      <div class="lable">联行号</div>
                      <div class="value" :title="detailinfo.extdatajson.unionpayno">
                        {{ detailinfo.extdatajson.unionpayno || "-" }}
                      </div>
                      <div class="icon" @click="gocopy" v-copy="detailinfo.extdatajson.unionpayno">
                        <img src="@/assets/lwfb-fz.png" alt="" />
                      </div>
                    </div>
                    <div class="li" v-else>
                      <div class="lable">联行号</div>
                      <div class="value">-</div>
                      <div class="icon"></div>
                    </div>

                    <div class="li" v-if="
                      detailinfo.extdatajson != null &&
                      detailinfo.extdatajson != null
                    ">
                      <div class="lable">币种</div>
                      <div class="value">
                        {{
                          detailinfo.extdatajson.currency == "USB"
                            ? "美元"
                            : detailinfo.extdatajson.currency == "HKD"
                              ? "港币"
                              : detailinfo.extdatajson.currency == "JPY"
                                ? "日元"
                                : "人民币" || "-"
                        }}
                      </div>
                    </div>
                    <div class="li" v-else>
                      <div class="lable">币种</div>
                      <div class="value">-</div>
                    </div>
                  </div>
                </div>
                <div class="theme-right" @click="goto">
                  <Echart ref="jgzzfb" id="jgzzfb" class="echart" :options="opt" height="100%" width="100%"></Echart>
                </div>
              </div>
              <div class="theme-btm">
                <div class="info-qy">
                  <div class="region" :style="{
                    justifyContent: detailinfo.businessareaname
                      ? 'space-around'
                      : '',
                  }">
                    <div class="lable">经营区域</div>
                    <div style="
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        width: calc(100% - 3.2rem);
                      ">
                      <div class="value" :title="detailinfo.businessareaname" v-if="detailinfo.businessareaname">
                        {{ detailinfo.businessareaname }}
                      </div>
                      <img src="../assets/baisesanjiao.png" style="width: 0.5rem; height: 0.5rem"
                        v-if="detailinfo.businessareaname" />
                      <div class="value" :style="{
                        width:
                          !detailinfo.businessareaname &&
                            detailinfo.provincename
                            ? '90%'
                            : '70%',
                      }" :title="`${detailinfo.provincename}${detailinfo.cityname}${detailinfo.regionname}`">
                        {{ detailinfo.provincename }}{{ detailinfo.cityname
                        }}{{ detailinfo.regionname }}
                      </div>
                    </div>
                    <div class="location" v-if="detailinfo.address">
                      <div class="icon">
                        <img src="@/assets/lwfb-dw.png" alt="" />
                      </div>
                      <div class="lie" :title="detailinfo.address">
                        {{ detailinfo.address }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="theme-other">
                  <div class="theme-other-tag">
                    <div class="bbtn" @click="otherTagClick(0)" :class="other_tag == 0 && 'on'">投标历史</div>
                    <div class="bbtn" @click="otherTagClick(1)" :class="other_tag == 1 && 'on'">中标记录</div>
                    <div class="bbtn" @click="otherTagClick(2)" :class="other_tag == 2 && 'on'">社会荣誉</div>
                    <div class="bbtn" @click="otherTagClick(3)" :class="other_tag == 3 && 'on'">项目评价</div>
                  </div>
                  <div v-if="other_tag == 0 || other_tag == 1">
                    <div class="seach">
                      <div class="seach-list">
                        <div class="seach-name">项目名称</div>
                        <el-input size="mini" v-model="supParam.projectname" placeholder=""></el-input>
                      </div>
                      <div class="seach-list">
                        <div class="seach-name">需求单位</div>
                        <el-input size="mini" v-model="supParam.orgname" placeholder=""></el-input>
                      </div>
                      <div class="seach-list" v-if="other_tag == 0">
                        <div class="seach-name">是否中标</div>
                        <el-select size="mini" v-model="supParam.winnerstatus" placeholder="请选择">
                          <el-option key="1" label="是" value="是"></el-option>
                          <el-option key="0" label="否" value="否"></el-option>
                        </el-select>
                      </div>
                      <div class="seach-reset" @click="seachReset">重置</div>
                      <div class="seach-btn" @click="seachBtn">搜索</div>
                    </div>
                    <div class="theme-btm-table table-1-0">
                      <div class="theme-btm-table-header">
                        <div class="td td1">序号</div>
                        <div class="td td2">任务名称</div>
                        <div class="td td3">项目名称</div>
                        <div class="td td4">需求单位</div>
                        <div class="td td5">采购方式</div>
                        <div class="td td6">招标结果发布时间</div>
                        <div class="td td7">是否中标</div>
                        <div class="td td8">中标金额（万元）</div>
                      </div>

                      <div class="mevaluatimiddle1" v-if="zbLoading" style="
                          height: 100%;
                          display: flex;
                          align-items: center;
                          justify-content: space-around;
                        ">
                        <dv-loading>Loading...</dv-loading>
                      </div>
                      <div class="theme-btm-table-body" v-else-if="tzbList.length > 0">
                        <div class="tr" v-for="(item, i) in tzbList" :key="i">
                          <div class="td td1">{{ i + 1 }}</div>
                          <div class="td td2" :title="item.tendername">{{ item.tendername }}</div>
                          <div class="td td3" :title="item.projectname">{{ item.projectname }}</div>
                          <div class="td td4" :title="item.orgname">{{ item.orgname }}</div>
                          <div class="td td5">{{ getType(item.proctype) }}</div>
                          <div class="td td6">{{ item.resultpublishdate?.split(' ')[0] }}</div>
                          <div class="td td7">{{ item.winnerstatus }}</div>
                          <div class="td td8">{{ (item.totalprice / 10000).toFixed(2) }}</div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </div>
                    <el-pagination small background align="center" @current-change="currentChangeZb"
                      :current-page="supParam.pageNum" :page-size="supParam.pageSize"
                      layout="total,prev,pager,next,jumper" :total="totalZb">
                    </el-pagination>
                  </div>
                  <div v-if="other_tag == 3">
                    <div class="seach">
                      <div class="seach-list">
                        <div class="seach-name">评论发起单位</div>
                        <el-input size="mini" v-model="proParam.evlprojectName" placeholder=""></el-input>
                      </div>
                      <div class="seach-list">
                        <div class="seach-name">项目名称</div>
                        <el-input size="mini" v-model="proParam.projectName" placeholder=""></el-input>
                      </div>
                      <div class="seach-list">
                        <div class="seach-name">业务单据名称</div>
                        <el-input size="mini" v-model="proParam.businessName" placeholder=""></el-input>
                      </div>
                      <div class="seach-reset" @click="seachProReset">重置</div>
                      <div class="seach-btn" @click="getProjectEvaluation">搜索</div>
                    </div>
                    <div class="theme-btm-table table-1-3">
                      <div class="theme-btm-table-header">
                        <div class="td td1">序号</div>
                        <div class="td td2">评论发起单位</div>
                        <div class="td td3">评价类型</div>
                        <div class="td td4">项目名称</div>
                        <div class="td td5">业务单据编号</div>
                        <div class="td td6">业务单据名称</div>
                        <div class="td td7">得分</div>
                        <div class="td td8">评价结果</div>
                        <div class="td td9">评价完成日期</div>
                      </div>
                      <div class="mevaluatimiddle1" v-if="pjLoading" style="
                          height: 100%;
                          display: flex;
                          align-items: center;
                          justify-content: space-around;
                        ">
                        <dv-loading>Loading...</dv-loading>
                      </div>
                      <div class="theme-btm-table-body" v-else-if="proList.length > 0">
                        <div class="tr" v-for="(item, i) in proList" :key="i">
                          <div class="td td1">{{ i + 1 }}</div>
                          <div class="td td2">{{ item.evlprojectname }}</div>
                          <div class="td td3" v-if="item.evalstyle == 1">线上评价</div>
                          <div class="td td3" v-if="item.evalstyle == 2">线下评价</div>
                          <div class="td td3" v-if="item.evalstyle == 3">直接汇总</div>
                          <div class="td td4">{{ item.projectname }}</div>
                          <div class="td td5">{{ item.businesscode }}</div>
                          <div class="td td6">{{ item.businessname }}</div>
                          <div class="td td7">{{ item.total }}</div>
                          <div class="td td8">{{ evalresultArr[item.evalresult] }}</div>
                          <div class="td td9">{{ item.completedate.split(' ')[0] }}</div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </div>
                    <el-pagination small background align="center" @current-change="currentChangePj"
                      :current-page="proParam.pageNum" :page-size="proParam.pageSize"
                      layout="total,prev,pager,next,jumper" :total="totalPj">
                    </el-pagination>
                  </div>
                  <div v-if="other_tag == 2">
                    <div class="theme-btm-tab">
                      <div class="theme-btm-tab-list" :class="tab == 0 && 'on'" @click="tabClick(0)">法院公告</div>
                      <div class="theme-btm-tab-list" :class="tab == 1 && 'on'" @click="tabClick(1)">失信被执行人</div>
                      <div class="theme-btm-tab-list" :class="tab == 2 && 'on'" @click="tabClick(2)">经营异常</div>
                      <div class="theme-btm-tab-list" :class="tab == 3 && 'on'" @click="tabClick(3)">严重违法</div>
                    </div>
                    <!-- 0 -->
                    <div class="theme-btm-table table0" v-if="tab == 0">
                      <div class="theme-btm-table-header">
                        <div class="td td1">序号</div>
                        <div class="td td2">公告类型</div>
                        <div class="td td3">当事人</div>
                        <div class="td td4">案由</div>
                        <div class="td td5">公告法院</div>
                        <div class="td td6">发布日期</div>
                        <div class="td td7">操作</div>
                      </div>
                      <div class="theme-btm-table-body">
                        <div class="tb_body no-data">暂无数据</div>
                      </div>
                    </div>
                    <!-- 1 -->
                    <div class="theme-btm-table table1" v-if="tab == 1">
                      <div class="theme-btm-table-header">
                        <div class="td td1">序号</div>
                        <div class="td td2">立案日期</div>
                        <div class="td td3">案号</div>
                        <div class="td td4">执行依据文号</div>
                        <div class="td td5">执行法院</div>
                        <div class="td td6">失信行为</div>
                        <div class="td td7">履行情况</div>
                        <div class="td td8">发布日期</div>
                      </div>
                      <div class="theme-btm-table-body">
                        <div class="tb_body no-data">暂无数据</div>
                      </div>
                    </div>
                    <!-- 2 -->
                    <div class="theme-btm-table table2" v-if="tab == 2">
                      <div class="theme-btm-table-header">
                        <div class="td td1">序号</div>
                        <div class="td td2">列入日期</div>
                        <div class="td td3">做出决定机关</div>
                        <div class="td td4">列入经营异常名录原因</div>
                      </div>
                      <div class="theme-btm-table-body">
                        <div class="tb_body no-data">暂无数据</div>
                      </div>
                    </div>
                    <!-- 3 -->
                    <div class="theme-btm-table table3" v-if="tab == 3">
                      <div class="theme-btm-table-header">
                        <div class="td td1">序号</div>
                        <div class="td td2">列入日期</div>
                        <div class="td td3">列入决定机关</div>
                        <div class="td td4">列入严重违法失信企业名单原因</div>
                      </div>
                      <div class="theme-btm-table-body" v-if="false">
                        <div class="tr" v-for="(item, i) in 1" :key="i">
                          <div class="td td1">{{ i + 1 }}</div>
                          <div class="td td2">2023-01-0{{ i + 1 }}</div>
                          <div class="td td3">{{ testArr[i].substring(0, 2) }}人民法院</div>
                          <div class="td td4">非法经营</div>
                        </div>
                      </div>
                      <div class="no-data" v-else>暂无数据</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Kspcxiaodialog>
    </div>
    <div v-if="kspcmiddlevisiable2" style="width: 100%; height: 100%">
      <Kspcxiaodialog2 :modalVisible="kspcmiddlevisiable2">
        <div class="table-conter" v-if="supplierData.length > 0">
          <div class="head">{{ supplierText }}</div>
          <div class="table-son">
            <tablecomponentsjgzzsmall :tableData="supplierData" :currentPage="page" />
            <!-- <el-table
              :data="supplierData"
              style="width: 100%"
              height="100%"
              :header-cell-style="{ backgroundColor: '#192c55', color: '#fff' }"
              :row-class-name="tableRowClassName"
              @row-click="rowClick"
            >
              <el-table-column
                align="center"
                type="index"
                label="序号"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="suppliername"
                label="公司名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                width="200"
                align="center"
                prop="totalprice"
                show-overflow-tooltip
                label="中标金额"
              >
              </el-table-column>
            </el-table> -->
          </div>
          <div class="kspcfenyeqi">
            <el-pagination style="margin-top: 5%" small background align="center" @current-change="alldatacurrentpage"
              :current-page="page" :page-size="10" layout="total,prev,pager,next,jumper" :total="total">
            </el-pagination>
          </div>
        </div>
        <div class="table-conter" v-else style="
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          ">
          <dv-loading>Loading...</dv-loading>
        </div>
      </Kspcxiaodialog2>
    </div>

    <!-- 法院公告详情 -->
    <el-dialog title="法院公告详情" :visible.sync="dialogVisible" append-to-body width="70%" :before-close="handleClose1">
      <div class="ksp-dialog-con">
        <!-- <div class="ksp-dialog-con-title">法院公告详情</div> -->
        <div class="ksp-dialog-con-table">
          <div class="tr">
            <div class="td td1">当事人</div>
            <div class="td td2">
              <div class="div1">被告: 重庆维硬农业科技有限公司</div>
              <div class="div2">原告: 重庆燃气集团股份有限公司</div>
            </div>
            <div class="td td1">公告类型</div>
            <div class="td td2">裁判文书</div>
          </div>
          <div class="tr">
            <div class="td td1">公告法院</div>
            <div class="td td2">重庆市渝中区人民法统</div>
            <div class="td td1">公告日期</div>
            <div class="td td2">2023-12-26</div>
          </div>
          <div class="tr">
            <div class="td td1">案由</div>
            <div class="td td3">房屋租赁合同纠纷</div>
          </div>
          <div class="tr">
            <div class="td td1">公告内容</div>
            <div class="td td3">
              重庆雄硕农业科技有限公司:本院受理原告重庆燃气集团股份有限公司与被告重庆雄硕农业科技有限公司房屋租赁合同纠纷案,因型送达人下落不明,现依法向你公告送达(2023)渝0103民初19966号民事列决书,判决如下:一、被告重庆雄硕农业科技有限公司于判决生效之日起十日内向原告重庆燃气集团股份有限公司返还位于重庆市渝中区棉花街18号第三层3-5#的房屋二、被告重庆维硕农业科技有限公司于判决生效之日超十日内向原告重庆燃气集团股份有限公司支付租金63648元并支付自2023年10月1日18布源还房屋之日止按照每月3063元的标准计算的房屋占有使川费三、被告重庆维硕农业科技有限公司于决生效之日起十日内向原告重庆燃气集团股份有限公司变付违约金7325.4元,并支付自2023年5月1日起至付清租金时止按照每日15.32元的标准计算的违约金:四，驳回原告重庆燃气集团股份有限公司的其他诉讼请求，自公告之日期30日内来本获领取民事判决书,通期视为送达。如不服本判决
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
let that = this;
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      let ele = document.getElementById("showvisible");
      let inpputval = document.getElementById("inputval").value;
      console.log(inpputval, "inpputval");
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (ele == null || inpputval == "") {
        if (el.contains(e.target)) {
          return false;
        }
      } else {
        if (el.contains(e.target) || ele) {
          // document.getElementById("inputval").value = ""
          return false;
        }
      }

      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener("click", documentHandler);
  },
  update() { },
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener("click", el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};

import APIS from "@/api/index";
import { Message } from "element-ui";
import Swiper from "swiper/bundle";
import axios from "axios";
import Echart from "@/common/echart";
import dataPicker from "@/components/datePicker/index.js";
import Kspcxiaodialog from "@/components/kspcxiaodialog_1.vue";
import Kspcxiaodialog2 from "@/components/kspcxiaodialog2.vue";
import popover from "@/components/popover/index.js";
import tablecomponentsjgzzsmall from "@/components/tablecomponentsjgzzsmall.vue";

import * as echarts from "echarts";

export default {
  props: {},
  directives: { clickoutside },
  data() {
    return {
      enumeration: { 1: '合伙企业', 2: '私营企业', 3: '联营企业', 4: '集体企业', 5: '国有企业', 6: '股份合作制企业', 7: '有限责任公司', 8: '股份有限公司', 9: '事业单位', 10: '教育机构', 11: '民办非企业机构' },
      qcdsVal: '',
      qcdsList: [],

      other_tag: 0,

      currentPage: 1,
      totalTb: 0,

      com_type_val: '',
      com_type_opt: [],
      evalresultArr:{1:'D类(60分以下)',2:'C类(60(含)~75分)',3:'B类(75(含)~90分)',4:'A类(90(含)~100分)'},
      testArr: [
        '重庆市渝中区人民法院',
        '杭州市环境集团有限公司',
        '杭州城投建设有限公司',
        '杭州市路桥集团股份有限公司',
        '杭州市燃气集团有限公司',
        '杭州市金融投资集团有限公司',
        '浙江威星智能仪表股份有限公司',
        '浙江柏灵农业发展股份有限公司',
        '浙江龙文精密设备有限公司',
        '浙江大农实业股份有限公司',
      ],
      year: new Date().getFullYear().toString(),
      loading: true,
      ksLoading: true,
      mySwiperhyjjwcgqk: "",
      tableList: [],
      qymcnamekspc: "",
      showkspc: false,
      pageNum: 1,
      pageSize: 10,
      kspclist: [],
      isDisabled: false,
      kspcmiddlevisiable: false,
      kspcmiddlevisiable2: false,
      detailinfo: {},
      supplierData: [],
      total: 0,
      page: 1,
      objtype: "",
      supplierText: "",
      dataLoading: false,
      timer: null,
      timet: null,
      // options: [],
      // value: "",
      count: 0,
      timer: "",

      tab: 0,
      opt: {
      },
      dialogVisible: false,

      tableData: [],
      projectList: [],

      supParam: {
        "supplierid": "",
        "projectname": "",
        "orgcode": "",
        "orgname": "",
        "winnerstatus": "",
        "pageNum": 1,
        "pageSize": 10
      },
      tzbList: [],

      proParam: {
        "orgId": "",
        "evlprojectName": "",
        "projectName": "",
        "businessName": "",
        "pageNum": 1,
        "pageSize": 10
      },
      proList: [],
      currentPageTb: 1,

      totalZb: 0,
      zbLoading: false,
      totalPj: 0,
      pjLoading: false,
    };
  },
  computed: {},
  //
  components: {
    Kspcxiaodialog,
    popover,
    Kspcxiaodialog2,
    tablecomponentsjgzzsmall,
    dataPicker,
    Echart,
  },
  mounted() {
    this.gettypeSupplierTOP10();
    this.supplierList();
    this.getProjectList();
    this.getSupplierTbZbList();
  },

  beforeDestroy() {
    //清除定时器
    clearTimeout(this.timet);
    this.timet = null;
  },
  methods: {
    currentChangePj(val) {
      this.proParam.pageNum = val;
      this.getProjectEvaluation();
    },
    currentChangeZb(val) {
      this.supParam.pageNum = val;
      this.getSupplierTbZbList();
    },
    resetEvent() {
      this.year = '';
      this.qymcnamekspc = '';
      this.com_type_val = '';
    },
    getQCDSTotalScore(id) {
      let data = { supplierid: id }
      this.getQCDSCateGoryScore(id);
      APIS.Kspc.getQCDSTotalScore(data).then(res => {
        this.qcdsVal = res.data;
      })
    },
    getQCDSCateGoryScore(id) {
      let data = { supplierid: id }
      APIS.Kspc.getQCDSCateGoryScore(data).then(res => {
        this.qcdsList = res.data;
        let maxVal = Math.max(res.data)
        let indicator = [];
        let arr = [];
        res.data.map(e => {
          arr.push(e.score);
          if (e.latitude_code === 'C_CB') {
            indicator.push({ name: '成本', max: maxVal });
          }
          else if (e.latitude_code === 'D_JF') {
            indicator.push({ name: '交付', max: maxVal });
          }
          else if (e.latitude_code === 'O_QT') {
            indicator.push({ name: '其他', max: maxVal });
          }
          else if (e.latitude_code === 'P_FZTL') {
            indicator.push({ name: '发展潜力', max: maxVal });
          }
          else if (e.latitude_code === 'Q_ZL') {
            indicator.push({ name: '质量', max: maxVal });
          }
          else if (e.latitude_code === 'S_FW') {
            indicator.push({ name: '服务', max: maxVal });
          }
        });

        if (arr.length == 0) {
          indicator = [
            { name: '质量', max: 40 },
            { name: '成本', max: 40 },
            { name: '交付', max: 40 },
            { name: '服务', max: 40 },
            { name: '潜力', max: 40 },
            { name: '其他', max: 40 },
          ];
        }
        this.opt = {

          title: {
            text: ''
          },
          radar: {
            // shape: 'circle',
            center: ['53%', '53%'],
            radius: '65%',
            indicator
            // indicator: [
            //   { name: '质量', max: 40 },
            //   { name: '成本', max: 40 },
            //   { name: '交付', max: 40 },
            //   { name: '服务', max: 40 },
            //   { name: '潜力', max: 40 },
            //   { name: '其他', max: 40 },
            // ]
          },
          series: [
            {
              type: 'radar',
              tooltip: {
                padding: 15,
              },
              data: [
                {
                  value: arr,
                }
              ]
            }
          ]

        }
      })
    },
    otherTagClick(e) {
      this.seachReset();
      this.seachProReset();
      this.other_tag = e;
      if (e == 1) {
        this.$set(this.supParam, 'winnerstatus', '是');
      } else {
        this.$set(this.supParam, 'winnerstatus', '');
      }
      if (e == 0 || e == 1) {
        this.seachBtn();
      }
      else if (e == 3) {
        this.getProjectEvaluation();
      }

    },
    getType(proctype) {
      let str = '';
      switch (proctype) {
        case '1':
          str = '公开预审'
          break;
        case '2':
          str = '邀请招标'
          break;
        case '3':
          str = '询价采购'
          break;
        case '5':
          str = '公开后审'
          break;
        case '6':
          str = '单一来源'
          break;
        case '7':
          str = '应急采购'
          break;
        case '8':
          str = '竞争性谈判'
          break;
        case '9':
          str = '竞价采购'
          break;
        case '14':
          str = '补充协议'
          break;

        default:
          break;
      }
      return str;
    },
    seachBtn() {
      // if(this.other_tag == 1){
      //   this.$set(this.supParam, 'winnerstatus', '是');
      // } else {
      //   this.supParam.winnerstatus = '否'
      //   this.$set(this.supParam, 'winnerstatus', '否');
      // }
      this.getSupplierTbZbList();
    },
    seachReset() {
      this.supParam.projectname = '';
      this.supParam.orgname = '';
      this.supParam.pageNum = '1';
      this.supParam.pageSize = '10';
      this.$set(this.supParam, 'winnerstatus', '');
    },
    seachProReset() {
      this.proParam.businessName = '';
      this.proParam.evlprojectName = '';
      this.proParam.projectName = '';
      this.proParam.pageNum = 1;
      this.proParam.pageSize = 10;
    },
    // 投标记录、中标记录接口
    getSupplierTbZbList() {
      let data = this.supParam;
      this.zbLoading = true;
      APIS.Kspc.getSupplierTbZbList(data).then(res => {
        console.log('getSupplierTbZbList::::::::', res);
        this.zbLoading = false;
        this.tzbList = res.data.items;
        this.totalZb = res.data.total;
      });
    },
    // 获取供应商项目评价
    getProjectEvaluation() {
      let data = { ...this.proParam };
      this.pjLoading = true;
      APIS.Kspc.getProjectEvaluation(data).then(res => {
        this.pjLoading = false;
        if (res.data?.items?.length > 0) {
          this.proList = res.data.items;
          this.totalPj = res.data.total;
        } else {
          this.proList = [];
        }
      })
    },
    getProjectList() {
      APIS.Baseapi.projectList().then(res => {
        this.projectList = res.data;
      })
    },
    supplierList(pageNum) {
      console.error('supplierList - - - - - - - - -')
      let data = {
        pageNum: this.currentPageTb || 1,
        pageSize: 20,
        year: this.year,
        supplierName: this.qymcnamekspc,
        objType: this.com_type_val
      };
      this.ksLoading = true;
      APIS.Kspc.supplierList(data).then(res => {
        this.ksLoading = false;
        if (res.data?.items.length > 0) {
          this.tableData = res.data.items;
        } else {
          this.tableData = [];
        }
        this.totalTb = res.data.total
      });
    },
    currentChangeTb(e) {
      console.log(e);
      this.currentPageTb = e;
      this.supplierList(e)
    },
    goto() {
      let supplierid = this.supParam.supplierid;
      let belongUserId = this.$store.state.belongUserId;
      window.open(`${this.base_url}/enterprise/simple/v?_m=qcds/supplier/qcdsShow&supplierid=${supplierid}&clientuserid=${belongUserId}&_winid=w4533&_t=8824`)
    },
    handleClose1() {
      this.dialogVisible = false;
    },
    detailEvent() {
      this.dialogVisible = true;
    },
    tabClick(e) {
      this.tab = e;
    },
    handleClose() {
      this.showkspc = false;
    },
    animation() {
      if (!this.loading) {
        this.loading = true;
        this.timet = setTimeout(() => {
          this.loading = false;
        }, 1000);
      }
    },
    // show() {
    //   this.showselect(1);
    // },
    // hide() {
    //   this.kspclist = [];
    // },
    gocopy() {
      this.$message({
        message: "已复制",
        offset: window.screen.height / 2.8,
        duration: 1000,
      });
    },
    gengduoxinxi() {
      var s = [
        `基本信息,/enterprise/simple/v?_m=sm/supplier/mainlib/edit&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `银行信息,/enterprise/simple/v?_m=sm/supplier/bank/sm_bank_info&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `联系人,/enterprise/simple/v?_m=sm/supplier/linkman&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `历史业绩,/enterprise/simple/v?_m=sm/supplier/history&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `证照附件,/enterprise/simple/v?_m=sm/supplier/certificate&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `班组信息,/enterprise/simple/v?_m=sm/supplier/relied_groups&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `考察报告,/enterprise/simple/v?_m=sm/supplier/check/check_records&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `平台合作记录,/enterprise/simple/v?_m=sm/supplier/cooperation&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `退回记录,/enterprise/simple/v?_m=sm/supplier/return_record&supplierid=${this.detailinfo.enterpriseid}`,
        `修改记录,/enterprise/simple/v?_m=sm/supplier/editrecords&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `转库记录,/enterprise/simple/v?_m=sm/supplier/transferlib_record&supplierid=${this.detailinfo.enterpriseid}`,
        `合作单位,/enterprise/simple/v?_m=sm/supplier/platforms&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `评价记录,/enterprise/simple/v?_m=sm/supplier/evalrecords&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `备注信息,/enterprise/simple/v?_m=sm/supplier/comments&readonly=false&supplierid=${this.detailinfo.enterpriseid}`,
        `会员费缴费记录,/enterprise/simple/v?_m=sm/supplier/supp_member_fee_record&supplierid=${this.detailinfo.enterpriseid}`,
        `服务费缴费记录,/enterprise/simple/v?_m=sm/supplier/supp_trade_fee_record&supplierid=${this.detailinfo.enterpriseid}`,
      ];

      let url =
        this.base_url + "/tabs2?tabs=" +
        s
          .map((item) => {
            return (
              encodeURI(item.split(",")[0]) +
              encodeURIComponent("," + item.split(",")[1])
            );
          })
          .join(";");
      window.open(url);
    },
    waibufenxian() {
      this.clickitem(this.detailinfo);
    },
    checkInClickArea() {
      return this.kspcmiddlevisiable;
    },
    closepopup() {
      setTimeout(() => {
        this.kspcmiddlevisiable = false;
        // this.supplierList();
        // this.showkspc = true;
      }, 100);
      this.showkspc = true;
    },
    closepopup2() {
      this.kspcmiddlevisiable2 = false;
      this.supplierData = [];
      this.page = 1;
    },
    // 查看更多
    handleSeeMore(e) {
      if (e.list[0]) {
        this.objtype = e.list[0].objtype;
        this.supplierText = e.title;
        this.loadTypeSupplierList();
        this.kspcmiddlevisiable2 = true;
        // this.supplierData=[{suppliername:'阿里巴巴不',totalprice:'1000万元'}]
      } else {
        Message({
          message: "暂无更多数据！",
          offset: window.screen.height / 2.8,
          duration: 1000,
        });
      }
    },
    // 查看更多数据
    loadTypeSupplierList() {
      const parameter = {
        objtype: this.objtype,
        pageSize: 10,
        pageNum: this.page,
      };
      if (this.year) {
        parameter.year = this.year;
      }
      APIS.Kspc.typeSupplierList(parameter).then((res) => {
        const data = res.data ? res.data : {};
        // {{ returnFloat(item.totalprice / 10000) }}万元
        this.supplierData = data.items.map((item) => {
          item.totalprice = this.returnFloat(item.totalprice / 10000) + "万元";
          return item;
        });
        this.total = data.total;
      });
    },
    rowClick(e) {
      this.kspclistclickitem(e.supplierid);
    },
    alldatacurrentpage(e) {
      this.page = e;
      this.loadTypeSupplierList();
    },
    kspclistclickitem(id) {
      this.qymcnamekspc = "";
      this.getdetail(id);
      // this.showkspc = true;
    },
    kspclistclickitem1(id, item) {
      this.other_tag = 0;
      this.getdetail(id);
      // this.showkspc = true;
      this.supParam.supplierid = id;
      this.getSupplierTbZbList();
      this.proParam.orgId = id;
      this.getProjectEvaluation();
      this.getQCDSTotalScore(id);
    },
    getdetail(id) {
      // getEnterprise
      APIS.Kspc.getEnterprise({ id: id })
        .then((res) => {
          let res1 = {
            data: [
              {
                "diccode": "1",
                "dicname": "合伙企业"
              },
              {
                "diccode": "2",
                "dicname": "私营企业"
              },
              {
                "diccode": "3",
                "dicname": "联营企业"
              },
              {
                "diccode": "4",
                "dicname": "集体企业"
              },
              {
                "diccode": "5",
                "dicname": "国有企业"
              },
              {
                "diccode": "6",
                "dicname": "股份合作制企业"
              },
              {
                "diccode": "7",
                "dicname": "有限责任公司"
              },
              {
                "diccode": "8",
                "dicname": "股份有限公司"
              }
            ]
          }
          res1.data.forEach((item) => {
            if (res.data.property == item.diccode) {
              res.data.kspcqyxz = item.dicname;
            }
          });
          this.detailinfo = res.data;
          this.kspcmiddlevisiable = true;
          // });
        })
        .catch((err) => { });
    },
    handleScroll() {
      if (
        this.$refs.container.scrollTop +
        this.$refs.container.clientHeight +
        5 >=
        this.$refs.container.scrollHeight
      ) {
        if (this.timer !== null) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          // if (this.dataLoading) return;
          this.load();
        }, 300);
      }
    },
    load() {
      this.pageNum++;
      this.showkspc = true;

      this.showselect(0, 1);
    },
    showselect(num, isgo) {
      console.log('arguments:', arguments);
      // enterpriseNameList
      if (num == 1) {
        this.pageNum = 1;
      }
      if (this.qymcnamekspc) {
        APIS.Kspc.enterpriseNameList({
          year: this.year,
          enterpriseName: this.qymcnamekspc,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
          .then((res) => {
            if (res.data.items.length == 0) {
              if (!isgo) {
                this.$message({
                  message: "暂无搜索结果！",
                  offset: window.screen.height / 2.8,
                  duration: 1000,
                });
                this.count = 0;
              } else {
                if (this.count == 0) {
                  if (this.kspclist.length >= res.data.total) {
                    this.$message({
                      message: "暂无搜索结果！",
                      offset: window.screen.height / 2.8,
                      duration: 1000,
                    });
                    this.count++;
                  }
                }
              }

              if (this.kspclist.length > 0) {
                this.$store.state.showpopover = this.kspclist;
              } else {
                this.$store.state.showpopover = [];
              }
            } else {
              if (num == 1) {
                this.kspclist = res.data.items;
                this.showkspc = true;
              } else {
                if (this.kspclist.length > 0) {
                  this.kspclist = this.kspclist.concat(res.data.items);
                  this.$store.state.showpopover = this.kspclist.concat(
                    res.data.items
                  );
                } else {
                  this.kspclist = res.data.items;
                  this.$store.state.showpopover = res.data.items;
                }
                this.showkspc = true;
              }
            }
          })
          .finally((_) => {
            this.dataLoading = false;
          });
      } else {
        this.$message({
          message: "请输入企业名称！",
          offset: window.screen.height / 2.8,
          duration: 1000,
        });
      }
    },
    getlink(name) {
      let data = {
        _: Date.now(),
        keyword: name,
      };
      axios({
        method: "post", //请求方法
        data: data,
        url: "https://srm.cnzgc.com/zjszjj/tyc/cloud-tempest/search/suggest/v3",
      })
        .then((res) => {
          //执行成功后代码处理
          if (res.data.errorCode == 0) {
            this.openlinknew(1, res.data.data[0].id);
          } else {
            this.openlinknew(0);
          }
        })
        .catch((error) => {
          this.openlinknew(0);
        });
    },
    openlinknew(num, id) {
      if (num == 1) {
        window.open(`https://www.tianyancha.com/company/${id}`);
      } else {
        window.open("https://www.tianyancha.com/");
      }
    },
    clickitem(item) {
      // for(var i = 0;i<11;i++){
      this.getlink(item.enterprisename);
      // }
    },
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);
      return num;
    },
    gettypeSupplierTOP10() {
      this.tableList = [];
      let namearr = [];
      let swiperarr = [];
      this.loading = true;
      this.isDisabled = true;
      APIS.Kspc.typeSupplierTOP10({ year: this.year })
        .then((res) => {
          this.loading = false;
          this.isDisabled = false;
          for (const key in res.data) {
            let arr = key.split("-");
            namearr.push({
              name: arr[0] + "供应商",
            });
            swiperarr.push(res.data[key]);
          }
          namearr.forEach((item, index) => {
            this.tableList.push({
              title: item.name,
              // subtitle: "中标金额",
              list: swiperarr[index],
              id: 1,
            });
          });
          // this.initTable();
          if (!this.year) {
            const t1 = new Date().getTime() + 10800000;
            let kspcbottomtoptenobj = {
              data: res.data,
              temp: t1,
            };
            localStorage.setItem(
              "kspcbottomtopten",
              JSON.stringify(kspcbottomtoptenobj)
            );
          }
          this.loading = false;
        })
        .catch((err) => { });
    },
    initTable() {
      this.$nextTick(() => {
        for (let i = 0; i < 8; i++) {
          let swiper = new Swiper(`.gdwcgqkswiper${i}`, {
            direction: "vertical",
            slidesPerView: 10, //swiper容器同时展示的元素数量
            autoplay: {
              //开启自动切换
              delay: 2000, //自动切换的时间间隔
              stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
              disableOnInteraction: false, //用户操作swiper之后，是否停止自动切换效果
            },
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            observeSlideChildren: true,
          });
          setTimeout(() => {
            swiper.el.onmouseover = () => {
              //鼠标放上暂停轮播
              swiper.autoplay.stop();
            };
            swiper.el.onmouseleave = () => {
              //鼠标放上暂停轮播
              swiper.autoplay.start();
            };
          }, 5000);
        }
      });
    },
  },
};
</script>
// 这种引入确保样式只在该组件生效
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
.kspctopposidiv {
  height: 1.2rem;
  display: flex;
  align-items: center;
  padding-top: 10px;

  /* position: absolute;
  top: -1.8rem;
  right: 0.5rem; */
  .el-popover__reference-wrapper {
    display: flex;
  }
}

.kspctopposidivsmall {
  // width: 95%;
  // padding: 0.2rem;
  box-sizing: border-box;
  // background-color: white;
  height: 12rem;
  overflow: auto;
  // background-color: #edf1f9;
  // border-radius: 0.4rem;
  // box-shadow: 0.1rem 0 0.5rem 0 rgba(0, 0, 0, 0.5);

  .kspctopposidivsmallli {
    font-size: 0.8rem;
    padding: 0.2rem;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden; //代表的是超出后隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //超出后省略号
  }

  .kspctopposidivsmallli:hover {
    background-color: #192c55;
    color: white;
  }
}

::v-deep .kspcinputclass {
  border-radius: 2rem;
  height: 1.2rem;
  border: 1px solid;
  padding: 0.1rem;

  // zoom: 0.5;
  .el-input__inner {
    width: 20rem;
    height: 100%;
    line-height: 1.2rem;
    border-radius: 2rem;
    background-color: transparent;
    border: none;
  }

  .el-input {
    font-size: 0.7rem;
  }

  .el-input__suffix {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

.ksp-dialog {
  &-con {
    background: #fff;

    &-title {
      font-size: 20px;
      line-height: 1.2;
    }

    &-table {
      .tr {
        display: flex;

        .td {
          padding: 15px;
          box-sizing: border-box;
          border: 1px solid #666;

          &.td1 {
            padding-left: 10px;
            width: 15%;
          }

          &.td2 {
            width: 35%;
          }

          &.td3 {
            width: 85%;
          }
        }
      }
    }
  }
}

.keshangpingce {
  width: 98%;
  height: 100%;
  font-size: 1rem;
  margin: 0 auto;
  position: relative;

  .tb {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-top: 1rem;

    .td {
      text-align: center;
    }

    .td_1 {
      width: 6.5%;
    }

    .td_2 {
      width: 22.78%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .td_2_1 {
      width: 10%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .td_3 {
      width: 19.12%;
    }

    .td_4 {
      width: 16.62%;
    }

    .td_5 {
      width: 14.48%;
    }

    .td_6 {
      width: 12.1%;
    }

    .td_7 {
      width: 8.34%;
    }

    &_head {
      display: flex;
      height: 2rem;
      line-height: 2rem;
      background: #182c56;
      border-radius: 0.5rem;
      color: #fff;
    }

    &_body {
      padding-top: 0.3rem;
      height: calc(100% - 8rem);
      overflow: auto;

      .tr {
        width: 100%;
        display: flex;
        line-height: 1.5rem;
        font-size: 0.9rem;

        &:nth-child(2n) {
          background: #e4e8f2;
        }

        .td_7 {
          color: #0000ff;
          cursor: pointer;
        }
      }
    }
  }

  .com_type {
    margin-right: 1rem;

    ::v-deep .el-input__inner {
      background-color: transparent;
      border: 1px solid #182c56;
      border-radius: 1rem;
      height: 1.5rem;
      line-height: 1.5rem;
    }

    ::v-deep .el-input--mini .el-input__icon {
      line-height: 1.5rem;
    }
  }
}

.textchuli {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.row-item {
  color: #192c55;
}

.row-item:nth-child(2) {
  background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
  color: transparent;
  -webkit-background-clip: text;
}

.casket::-webkit-scrollbar {
  display: none;
}

.casket {
  width: 100%;

  .info {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.8rem;

    .info-hz {
      width: 60%;
      height: 100%;
    }

    .num {}
  }

  .info:hover {
    background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
    color: transparent;
    -webkit-background-clip: text;
  }

  // .info:nth-child(1) {
  //   background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
  //   color: transparent;
  //   -webkit-background-clip: text;
  // }
}

.color {
  background: #192c55;
  color: white;
  margin-bottom: 5px;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .text {
    width: 12rem;
    overflow: hidden; //代表的是超出后隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //超出后省略号
  }

  .see-more {
    cursor: pointer;
    font-size: 0.6rem;
    text-align: right;
    padding: 5px 5px;
  }
}

.popup {
  height: 100%;
  position: relative;
  padding: 1.8rem 0 0 3.8rem;
  box-sizing: border-box;
  overflow: auto;

  .tag-conter {
    position: absolute;
    padding-top: 0.2rem;
    left: 0.9rem;
    top: 0.15rem;
    width: 2rem;
    height: 3.7rem;
    background-image: url("@/assets/lwfb-bgi.png");
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    font-size: 0.6rem;

    .text {
      height: 50%;
      font-size: 0.7rem;
    }

    .text2 {
      height: 50%;
      color: #192c55;
      font-size: 1rem;
      font-weight: bold;
      margin-top: 0.1rem;
      // display: flex;
      // align-items: center;
      // justify-content: space-around;
    }
  }

  .theme {
    color: #192c55;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 6%;
    box-sizing: border-box;

    // justify-content: space-around;
    &-box {
      display: flex;
      justify-content: space-between;

      .left {
        width: 70rem;

        &-con {
          display: flex;

          .ll {
            width: 35rem;
          }

          .rr {
            .info-from {
              display: flex;
              flex-wrap: wrap;
              // width: 58%;
            }
          }
        }
      }
    }

    &-con {
      display: flex;
    }

    .info-qcds {
      width: 30%;
      height: 30px;
      line-height: 30px;
      color: #fff;
      padding-left: 7px;
      box-sizing: border-box;
      background: #009245;
      margin-bottom: 13px;

      .sp1 {
        font-size: 22.62px;
      }

      .sp2 {
        font-size: 15px;
        padding-left: 10px;
        padding-right: 20px;
      }
    }

    &-left {
      width: 22rem;
    }

    &-center {
      width: calc(100% - 22rem - 23rem);

      .info-from {
        display: flex;
        flex-wrap: wrap;

        .li {
          width: 50%;
          margin-bottom: 1.6rem;

          .value {
            line-height: 1.2rem;
          }
        }
      }
    }

    &-right {
      width: 23rem;
      padding-right: 3rem;
      cursor: pointer;

      .echart {
        width: 100%;
        height: 100%;
        position: relative;
        top: 1.5rem;
      }
    }

    &-btm {
      padding-right: 3.8rem;

      &-tab {
        margin-top: 1rem;
        display: flex;

        &-list {
          cursor: pointer;
          font-size: 0.7rem;
          color: #192c55;
          margin-left: 1rem;
          margin-right: 1.7rem;
          position: relative;
          border-radius: 1rem;
          padding: 0.12rem 0.7rem;

          &.on {
            border: 1px solid #192c55;
          }

          /* &.on{
            &::before{
              content: '';
              width: 12px;
              height: 12px;
              background: linear-gradient(45deg, #192c55, #192c55 50%, transparent 50%, transparent 100%);
              transform: rotate(135deg);
              position: absolute;
              left: 50%;
              bottom: -0.88rem;
              margin-left: -6px;
            }
          } */
        }
      }

      &-table {
        margin-top: 12px;
        height: 16rem;
        overflow-y: auto;

        &-header {
          display: flex;
          background: #192C55;

          .td {
            text-align: center;
            color: #fff;
            line-height: 1.5rem;
          }
        }

        &-body {
          .tr {
            display: flex;
            align-items: center;

            &:nth-child(2n) {
              background: rgba(25, 44, 85, 0.15);
            }

            .td {
              text-align: center;
              line-height: 1.5rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        &.table-1-0 {
          .td1 {
            width: 5.46%;
          }

          .td2 {
            width: 12.76%;
          }


          .td3 {
            width: 16.14%;
          }

          .td4 {
            width: 13.83%;
          }

          .td5 {
            width: 9.68%;
          }

          .td6 {
            width: 18.22%;
          }

          .td7 {
            width: 11.91%;
          }

          .td8 {
            width: 11.99%;
          }
        }

        &.table-1-3 {
          .td1 {
            width: 5.05%;
          }

          .td2 {
            width: 9.32%;
          }

          .td3 {
            width: 15.07%;
          }

          .td4 {
            width: 13.675%;
          }

          .td5 {
            width: 14.92%;
          }

          .td6 {
            width: 11.11%;
          }

          .td7 {
            width: 10.95%;
          }

          .td8 {
            width: 8.7%;
          }

          .td9 {
            width: 11.18%;
          }
        }

        &.table0 {
          .td1 {
            width: 6.5%;
          }

          .td2 {
            width: 11.96%;
          }

          .td3 {
            width: 22.92%;
          }

          .td4 {
            width: 16.62%;
          }

          .td5 {
            width: 21.52%;
          }

          .td6 {
            width: 12.12%;
          }

          .td7 {
            width: 8.313%;
            cursor: pointer;
          }
        }

        &.table1 {
          .td1 {
            width: 5.6%;
          }

          .td2 {
            width: 10.5%;
          }

          .td3 {
            width: 20%;
          }

          .td4 {
            width: 14.5%;
          }

          .td5 {
            width: 18.8%;
          }

          .td6 {
            width: 10.58%;
          }

          .td7 {
            width: 8.7%;
          }

          .td8 {
            width: 11.05%;
          }
        }

        &.table2 {
          .td1 {
            width: 11.2%;
          }

          .td2 {
            width: 20.7%;
          }

          .td3 {
            width: 39.53%;
          }

          .td4 {
            width: 28.56%;
          }
        }

        &.table3 {
          .td1 {
            width: 11.2%;
          }

          .td2 {
            width: 20.7%;
          }

          .td3 {
            width: 39.53%;
          }

          .td4 {
            width: 28.56%;
          }
        }

      }
    }

    &-other {
      &-tag {
        display: flex;
        padding-top: 0.7rem;

        .bbtn {
          padding: 0.3rem 1rem;
          border: 1px solid #182c56;
          color: #182c56;
          margin-right: 1rem;
          cursor: pointer;
          border-radius: 2rem;

          &.on {
            background: #182c56;
            color: #fff;
          }
        }
      }

      .seach {
        display: flex;
        padding: 1rem 0;

        &-list {
          display: flex;
          align-items: center;
          margin-right: 1rem;

          .seach-name {
            margin-right: 1rem;
            word-break: keep-all;
          }
        }

        .seach-reset,
        .seach-btn {
          color: #fff;
          background: #182c56;
          border-radius: 2rem;
          padding: 0 1.5rem;
          line-height: 2;
          margin-right: 1.5rem;
          cursor: pointer;
        }
      }
    }

    p {
      font-size: 1.1rem;
      margin-top: 0.2rem;
    }

    .info-xy {
      display: flex;
      height: 1.1rem;
      align-items: center;
      margin-top: 0.3rem;

      .lable {
        background-color: #192c55;
        color: #fff;
        padding: 0.2rem 0.7rem;
        font-size: 0.6rem;
      }

      .value {
        margin-left: 0.3rem;
        font-size: 0.9rem;
        font-weight: bold;
      }

      .icon {
        margin-left: 0.3rem;

        img {
          width: 0.9rem;
          height: 0.8rem;
        }
      }
    }

    .info-sf {
      margin-top: 0.8rem;
      display: flex;
      color: #fff;
      font-size: 0.6rem;
      position: relative;

      .name {
        background-color: #192c55;
        padding: 0rem 0 0rem 3rem;
        display: flex;
        align-items: center;
        height: 1.2rem;
        width: 13%;
        white-space: nowrap; //不支持换行
        overflow: hidden; //隐藏多出部分文字
        text-overflow: ellipsis; //用省略号代替多出部分文字
      }

      .phone {
        padding: 0rem 2rem 0rem 2.3rem;
        background-color: #192c55;
        font-size: 0.8rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        height: 1.2rem;
      }

      .risk {
        color: #192c55;
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        margin-left: 0.5rem;
        font-weight: 600;
      }

      .name-icon {
        position: absolute;
        left: 0.5rem;
        top: -0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        background-color: #fff;
        padding: 0.3rem;
        border: 1px solid #182c56;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-around;

        img {
          width: 80%;
          height: 80%;
        }
      }

      .name-phone {
        position: absolute;
        left: 5.8rem;
        top: -0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        background-color: #fff;
        padding: 0.3rem;
        border: 1px solid #182c56;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-around;

        img {
          width: 50%;
          height: 50%;
        }
      }
    }

    .info-fw {
      margin-top: 1.2rem;
      width: 55rem;
      // flex: 1;
      /* background-image: url("@/assets/lwfb-wb.png");
      background-size: 100% 100%; */
      border: 1px solid #192C55;
      border-radius: 0.5rem;
      position: relative;
      padding: 0.7rem 0.5rem;

      .title {
        position: absolute;
        left: 1.5rem;
        font-size: 0.75rem;
        top: -0.45rem;
        background: #EDF1F9;
        padding: 0 10px;
      }
    }

    .info-from {
      font-size: 0.75rem;
      color: #192c55;

      .li:first-child {
        // margin-top: 0.7rem;
      }

      .li {
        display: flex;
        height: 1.2rem;
        margin-top: 0.3rem;

        .lable {
          line-height: 1.2rem;
          width: 4rem;
        }

        .value {
          width: 13.5rem;
          border-bottom: 1px solid #192c55;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
        }

        .icon {
          // margin-left: 1rem;
          display: flex;
          align-items: center;

          img {
            width: 0.9rem;
            height: 0.8rem;
          }
        }
      }
    }

    .info-qy {
      .region {
        background-color: #192c55;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        // margin-top: 1rem;
        // width: 19.5rem;
        width: 55.4rem;
        padding: 0.2rem 0.4rem;
        border-radius: 5px;

        .lable {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 4.5rem;
          font-size: 0.6rem;
          text-align: center;
          background-color: #fff;
          border-radius: 0.1rem;
          margin-right: 1rem;
          text-wrap: nowrap;
          padding: 0.2rem 0.5rem;
        }

        .value {
          color: #fff;
          // max-width: 30%;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
          font-size: 0.8rem;
        }

        .value:nth-child(2) {
          margin-left: 1rem;
        }

        .value:nth-child(3) {
          margin-left: 1.5rem;
        }
      }

      .location {
        display: flex;
        display: none;
        font-size: 0.6rem;
        margin-top: 0.4rem;

        .icon {
          width: 0.32rem;
          height: 0.5rem;
          margin: 0 0.2rem 0 0.5rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .lie {
          width: 83%;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
          color: #fff;
        }
      }
    }

    .information {
      // margin-top: 1rem;
      width: 19.5rem;

      // position: absolute;
      // bottom: 2%;
      div {
        margin: 0 auto;
        width: 4rem;
        text-align: center;

        p {
          font-size: 0.7rem;
        }
      }
    }
  }
}

.table-conter {
  padding: 3.5rem 0.5rem 0.5rem;
  height: 100%;
  position: relative;
  box-sizing: border-box;

  .head {
    position: absolute;
    font-size: 1rem;
    left: 0.5rem;
    top: 1.5rem;
  }

  .table-son {
    height: 88%;
  }
}

::v-deep .style1 {
  margin-left: 0.3rem;

  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    // top: 50%;
    margin-left: calc(100% - 1.5rem) !important;
    // transform: translate(-50%, -50%);
  }

  .el-input__inner {
    height: 1.3rem;
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.7rem;
  }

  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
    // display: none;
  }

  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }

  .el-date-editor.el-input {
    width: 8rem;
  }
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background: rgba(22, 89, 134, 0.75) !important;
}

::v-deep .el-table__body tr.current-row>td {
  background: rgba(9, 54, 103, 0.75) !important;
}

::v-deep .el-table__empty-text {
  color: #fff !important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.el-table::before {
  background-color: transparent;
}

.el-table__body-wrapper {
  background-color: transparent;
}

.el-table,
.el-table__expanded-cell {
  font-size: 0.7rem;
  background-color: transparent;
}

.el-table td.el-table__cell {
  border: none;
  padding: 0.6rem 0;
}

::v-deep .el-table__row {
  .el-table__cell:last-child {
    width: 5rem;
  }
}

.el-table__cell {
  padding: 0.7rem 0 !important;
}

.el-table__row:nth-child(2n) {
  background-color: #e4e8f2;
}

.el-icon {
  font-size: 0.6rem !important;
}
</style>
<style>
.scrollbar::-webkit-scrollbar {
  width: 0.2rem;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #dadee6;
}

.container::-webkit-scrollbar {
  width: 0.2rem;
}

.container::-webkit-scrollbar-track {
  background-color: #dadee6;
}
</style>
